<template>
  <div>
    <el-form ref="searchForm" class ="searchForm" :model="searchForm" 
        label-width="50">
          <el-row :gutter="12">
            <!--        合计24份  -->
            <el-col :span="6">
              <el-form-item prop="queryCondition.nickNameSml" label="姓名">
                <el-input v-model.trim="searchForm.queryCondition.nickNameSml">
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item prop="queryCondition.goldCoinMin" label="最小值">
                <el-input v-model="searchForm.queryCondition.goldCoinMin"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="queryCondition.goldCoinMax" label="最大值">
                <el-input v-model="searchForm.queryCondition.goldCoinMax"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
      <el-row>
        <el-col>
          <el-form-item prop="queryCondition.professions" label="职业">
            <el-checkbox-group v-model="searchForm.queryCondition.professions">
            <el-checkbox v-for="e in professionTypes " :key="e.index" :label="e.value" >
              {{e.text}}
            </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
    
          <el-form-item>
            <el-button type="primary" icon="el-icon-edit"
              @click="queryByCondition(1)"
              >查询</el-button>
            <el-button type="warning" icon="el-icon-remove"
              @click="() => $refs.searchForm.resetFields()"
              >重置</el-button>
          </el-form-item>
        </el-form>
    <el-row>
      <el-col :span="4" :ofset="0">
        <insert-player ></insert-player>
      </el-col>
    </el-row>
<!--    /*-->
<!--    *{-->
<!--    results: [-->
<!--    {-->
<!--    goldCoin: 0,-->
<!--    nickname: "string",-->
<!--    playerCode: "string",-->
<!--    playerId": 0,-->
<!--    profession: "architect",-->
<!--    silverCoin: 0,-->
<!--    usernameFk: "string",-->
<!--    version: 0-->
<!--    }-->
<!--    ],-->
<!--    total: 0-->
<!--    }-->
<!--    */-->
    
    <el-table :data="results" class="resultsTable" stripe height="360">
          <el-table-column prop="playerId" label="ID"></el-table-column>
          <el-table-column prop="playerCode" label="code"></el-table-column>
          <el-table-column prop="nickname" label="昵称"></el-table-column>
          <el-table-column prop="goldCoin" label="金币数量"></el-table-column>
          <el-table-column prop="silverCoin" label="银币数量"></el-table-column>
          <el-table-column prop="usernameFk" label="学号"></el-table-column>
<!--          <el-table-column prop="profession" label="职业"></el-table-column>-->

    
          <el-table-column label="职业" :formatter="professionFormat">
          </el-table-column>
          <el-table-column width="180px" fixed="left">
            <template slot-scope="props">
              <el-button
                class="el-button--mini" type="warning" icon="el-icon-edit"
                @click="openById(props.row.nickname)">编辑</el-button
              >
              <el-button class="el-button--mini" type="danger" icon="el-icon-edit"
                @click="deleteBy(props.row.nickname)">删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
              :total="total"
              :page-size="searchForm.pageSize"
              :current-page="searchForm.pageNum"
              @current-change="queryByCondition"
              layout="total, prev, pager, next, jumper"
            ></el-pagination>
        

    
  </div>
</template>

<script>
import {mapState} from "vuex"
import InsertPlayer from "@/components/InsertPlayer";
// eslint-disable-next-line no-unused-vars

// import New from './components/New.vue';
export default {

  name: "Player",
  components: {
    InsertPlayer
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: "value",
      searchForm:{
        pageNum: 1,
        pageSize: 5,
        queryCondition: {
          goldCoinMax:null,
          goldCoinMin: null,
          nickNameSml: "",
          professions: []
        }
      },

      total: 22,
      results: [],

    };
  },
  computed: {
    ...mapState(['professionTypes']),
    // sampleC() {
    //     return this.sampleD+'--';
    // }
    // professionTypes(){
    //   return this.$store.state.professionTypes;
    // }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    sampleM() {

    },
        queryByCondition(pageNum) {
              if (pageNum) this.searchForm.pageNum = pageNum;
              this.$http({
                method: "post",
                url: "/ceto/player/query",
                data: this.searchForm,
              }).then(
                (res) => {
                  this.total = res.data.total;
                  this.results = res.data.results;
                  
                },
                (error) => {
                  this.$message.warning("query mistake："+error.response.status)
                }
              );
            },
    professionFormat(row){
      return this.professionTypes.find(x=>x.value===row.profession).text;
    },
        
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  }
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>

</style>
